<template>
    <div class="container">
      案例管理
      <div>
        <el-button style="margin-left: 90%;" type="primary" @click="handleAdd">新增项目</el-button>
        <el-row>
          <el-col v-for="(data, index) in anliList" :key="data.id" :span="8" :offset="index % 2 == 0 ? 2 : 4" style="padding-bottom: 30px;">
            <div class="case-card">
              <img :src="data.img" class="case-image" />
              <div class="case-content">
                <el-collapse>
                  <el-collapse-item :title="data.title" name="1">
                    <div>
                      <span style="color: #999">案例详情：</span>
                      <span style="color: #999"> {{ data.content }} </span>
                    </div>
                    <div class="bottom">
                      <el-button type="text" @click="handleEdit(data.id)">编辑案例</el-button>
                    </div>
                  </el-collapse-item>
                </el-collapse>
                <div class="bottom"></div>
              </div>
            </div>
          </el-col>
        </el-row>
  
        <el-dialog title="编辑案例" v-model="editCaseVis" width="60%">
          <el-card style="width:50%">
            <div style="margin:15px;text-align:center">
              <el-upload class="avatar-uploader" action="http://localhost:9090/file/upload" :headers="{ token: user.token }" :show-file-list="false" :on-success="handleAvatarSuccess">
                <el-image v-if="editAnli.img" :src="editAnli.img" class="avatar"></el-image>
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
            </div>
            <el-form :model="editAnli" label-width="80px" style="padding-right:20px">
              <el-form-item label="案例名称" prop="title">
                <el-input v-model="editAnli.title" placeholder="案例名称"></el-input>
              </el-form-item>
              <el-form-item label="案例详情" prop="content">
                <el-input type="textarea" v-model="editAnli.content" placeholder="案例详情"></el-input>
              </el-form-item>
            </el-form>
            <div style="text-align:center; margin-bottom:20px">
              <el-button type="primary" @click="update">提交</el-button>
              <el-button @click="cancelEdit">取消</el-button>
            </div>
          </el-card>
        </el-dialog>
      </div>
    </div>
  </template>
  
  <script>
  import { ref } from 'vue';
  import { ElMessageBox, ElMessage } from 'element-plus';
  
  export default {
    setup() {
      const editAnli = ref({});
      const editCaseVis = ref(false);
  
      const handleEdit = (projectId) => {
        const selectedItem = anliList.value.find(item => item.id === projectId);
        if (selectedItem) {
          editAnli.value = { ...selectedItem };
          editCaseVis.value = true;
        }
      };
  
      const handleAdd = () => {
        console.log("新增案例");
        editAnli.value = {};
        editCaseVis.value = true;
      };
  
      const cancelEdit = () => {
        editCaseVis.value = false;
        editAnli.value = {};
      };
  
      const update = () => {
        // 更新数据的逻辑，使用 editAnli.value 对象中的数据
        // ...
  
        // 更新完成后关闭编辑对话框
        editCaseVis.value = false;
      };
  
      // 其他代码...
  
      return {
        editAnli,
        editCaseVis,
        handleEdit,
        handleAdd,
        cancelEdit,
        update,
        // 其他返回的对象...
      };
    },
  };
  </script>
  
  <style scoped>
    /* 样式代码... */
  </style>
  